<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <title>编辑文章</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/editor/css/editormd.min.css">
    <link href="${pageContext.request.contextPath}/static/semantic/semantic.min.css" rel="stylesheet">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/blog.css">
</head>
<body>
<!--头部信息-->
<jsp:include page="head.jsp" />
<!--中间内容-->
<div class="ui b-padding-tb b-contatiner">
    <div class="ui container">
                <div class="ui segment b-padding-tx b-border-radius">
                    <form id="form" action="${pageContext.request.contextPath}/article" class="ui form" enctype="multipart/form-data" method="post">
                            <!--标题-->
                            <div class="ui three fields">
                                <div class="field inline">
                                    <label>标题</label>
                                    <input id="title" type="text" name="title" value="${article.title}">
                                </div>
                                <!--图片-->
                                <div class="field inline">
                                    <label>首页图片</label>
                                    <input id="file" type="file" name="file" accept="image/*" onchange="image(event)" style="position:absolute;clip:rect(0 0 0 0);">
                                    <label for="file" class='ui button basic'>选择背景图片</label>
                                    <img id="myImg"  class="right floated tiny ui image rounded" alt="暂无图片" src="" style="width: 100px !important;height: 80px !important;">
                                </div>
                            </div>
                            <!--简介-->
                            <div class="field inline">
                                <label>简介(30-50字为宜)</label>
                                <textarea id="preface" name="preface" rows="2">${article.preface}</textarea>
                            </div>
                            <!--编辑器-->
                                <!--编辑框-->
                                <div id="md-content" style="z-index: 1;">
                                    <textarea id="content-editormd-markdown-doc" style="display: none" name="content-editormd-markdown-doc">
                                        ${article.content.trim()}
                                    </textarea>
                                </div>
                            <div class="three fields">
                                <!--作者-->
                                <div class="field inline">
                                    <label>Blog</label>
                                    <input value="${sessionScope.user.username}" readonly="" type="text">
                                </div>
                                <!--标签-->
                                <div class="field inline">
                                    <label>标签</label>
                                    <div class="ui selection dropdown">
                                        <input type="hidden" name="lid">
                                        <i class="dropdown icon"></i>
                                        <div class="default text">标签</div>
                                        <div id="label" class="menu">
                                        </div>
                                    </div>
                                </div>
                                <!--类别-->
                                <div class="field inline">
                                    <label>类别</label>
                                    <div class="ui selection dropdown">
                                        <input type="hidden" name="kid">
                                        <i class="dropdown icon"></i>
                                        <div class="default text">类别</div>
                                        <div id="kind" class="menu">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="ui buttons">
                                <button class="ui positive button">保存</button>
                                <div class="or" data-text="or"></div>
                                <a href="${pageContext.request.contextPath}/index" class="ui button">返回</a>
                            </div>
                        <div class="ui error message" style="width: 250px !important;"></div>
                    </form>
                </div>
    </div>
</div>


<!--底部信息-->
<footer>


</footer>
<script src="${pageContext.request.contextPath}/static/js/jquery-3.4.1.js"></script>
<script src="${pageContext.request.contextPath}/static/semantic/semantic.min.js"></script>
<script src="${pageContext.request.contextPath}/static/editor/lib/marked.min.js"></script>
<script src="${pageContext.request.contextPath}/static/editor/editormd.js"></script>
<script>
    $('.ui.selection.dropdown').dropdown();

    //编辑器编辑
    $(function(){
        var editor=editormd("md-content",{
            width:"100%",
            height:"800px",
            syncScrolling : "single",
            path:"${pageContext.request.contextPath}/static/editor/lib/",
            toolbarAutoFixed:true,
            saveHTMLToTextarea:true,
            imageUpload:true,
            imageFormats:["jpg","jpeg","gif","png"],
            imageUploadURL:"${pageContext.request.contextPath}/file/uploadImage"
            //editormd-image-file
        });

        $.ajax({

            url:"${pageContext.request.contextPath}/getLabelKind",
            method:"get",
            success:function (response) {
                console.log(response);
                $kinds=response.objectMap.kinds;
                $labels=response.objectMap.labels;
                // <div class="item" data-value="1">Male</div>

                for(let i=0;i<$kinds.length;i++){
                    let $kind=$("<div>").addClass("item").attr("data-value",$kinds[i].id).text($kinds[i].kind);
                    $("#kind").append($kind);
                }
                for(let i=0;i<$kinds.length;i++){
                    let $label=$("<div>").addClass("item").attr("data-value",$labels[i].id).text($labels[i].label);
                    $("#label").append($label);
                }

            },
            error:function () {
                console.log("小二在edit翻车了");
            }
        });
        if("${article.id}"!=0){
            $("#title").val("${article.title}");
            <%--$("#preface").val("${article.preface}");--%>
            $("#myImg").attr("src","${pageContext.request.contextPath}/static/image/${article.picture}");
            <%--$("#content-editormd-markdown-doc").val("${article.content}");--%>
            $("#title").attr("readonly","");
            $input=$("<input>").attr("type","hidden").attr("name","_method").attr("value","PUT");
            $articleId=$("<input>").attr("type","hidden").attr("value","${article.id}").attr("name","id");
            $picture=$("<input>").attr("type","hidden").attr("value","${article.picture}").attr("name","picture");
            $("#form").attr("action","${pageContext.request.contextPath}/updateArticle");
            $("#form").prepend($input).prepend($articleId).prepend($picture);
        }


    });


    //照片回显
    function image(e) {
        for (var i = 0; i < e.target.files.length; i++) {
            var file = e.target.files.item(i);
            if (!(/^image\/.*$/i.test(file.type))) {
                continue; //不是图片 就跳出这一次循环  
            }
            //实例化FileReader API  
            var freader = new FileReader();
            freader.readAsDataURL(file);
            freader.onload = function (e) {
                $("#myImg").attr("src", e.target.result);
            };
        }
    }

    //表单验证
    $("#form").form({
        on:'blur',
        fields:{
            title:{
                identifier:'title',
                rules:[{
                    type:'empty',
                    prompt:'标题不能为空'
                }]
            },
            preface:{
                identifier: 'preface',
                rules: [{
                    type:'minLength[30]',
                    prompt:'请输入30以上的简介'
                },
                    {
                        type:'maxLength[100]',
                        prompt:'简介内容过长'
                    }
                ]
            },
            content:{
                identifier:'content-editormd-markdown-doc',
                rules:[{
                    type:'empty',
                    prompt:'文章内容不能为空'
                }]
            },
            label:{
                identifier:'lid',
                rules:[{
                    type:'empty',
                    prompt:'请选择标签'
                }]
            },
            kind:{
                identifier:'kid',
                rules:[{
                    type:'empty',
                    prompt:'请选择类别'
                }]
            }


        }
    });

</script>
</body>
</html>